<template>
  <div>
    <el-button type="text" @click="addDialogFormVisible = true">新增</el-button>
    <el-button type="text" @click="deleteAssign">删除</el-button>
    <el-table
      highlight-current-row
      :data="tableData"
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        prop="ynDepartmentName"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="ynDay"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="ynTarget"
        label="目标">
      </el-table-column>
    </el-table>

    <el-dialog title="" :visible.sync="addDialogFormVisible">
      <el-form :model="form" label-position="right" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.ynDay"
            format="yyyy-MM-dd"
            type="date"
            @change="changeDate"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门">
          <el-radio-group v-model="radioValue" @change="changeRedio">
            <el-radio
              v-for="item in radioOptions"
              :key="item.id"
              :label="item.id">
              {{ item.ynName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="目标">
          <el-input v-model="form.ynTarget" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import moment from 'moment';

export default {
  name: "ynDayTarget",
  created() {
    this.form.ynDay = moment().format('yyyy-MM-DD')
    this.getynDayTarget()
    this.fetchRadioOptions()
  },
  methods: {
    getynDayTarget: function () {
      this.axios.post('/ynDayTarget/list').then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data;
        }
      })
    },
    changeDate(val) {
      // this.form.ynDay = moment(val).format('yyyy-MM-dd');
    },
    saveOrUpdate() {
      this.axios.post('/ynDayTarget/saveOrUpdate', {
        ...this.form,
        ynDay: moment(this.form.ynDay).format('yyyy-MM-DD')
      }).then(res => {
        if (200 === res.data.code) {
          this.addDialogFormVisible = false;
          this.getynDayTarget();
        }
      })
    },
    update() {
      this.addDialogFormVisible = true;
    },
    deleteAssign() {
      this.axios.post('/ynDayTarget/delete', this.currentRow).then(res => {
        if (200 === res.data.code) {
          this.getynDayTarget();
        }
      })
    },
    fetchRadioOptions() {
      // 假设 getRadioData 是一个返回 Promise 的函数，用来获取接口数据
      this.axios.post('/ynDepartment/list').then(response => {
        this.radioOptions = response.data.data; // 假设响应格式为 { data: [] }
      });
    },
    changeRedio(vId) {
      let obj = {};
      obj = this.radioOptions.find((item) => {  //这里的radioPay就是上面遍历的数据源
        return item.id === vId;  //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
      });
      this.form.ynDepartmentName = obj.ynName;
      this.form.ynDepartment = obj.id;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  },
  data() {
    return {
      tableData: [],
      currentRow: null,
      form: {
        ynName: '',
        ynDepartment: '',
        ynDepartmentName: '',
        ynDay: '',
        ynTarget: '',
      },
      addDialogFormVisible: false,
      radioValue: '', // 选中的单选按钮的值
      radioOptions: [] // 存储从接口获取的数据
    }
  }
}
</script>

<style scoped>

</style>
